import { useState } from 'react'
import { View } from '@tarojs/components'
import F2Canvas from 'taro-f2-react'
import { Chart, Interval, Legend } from '@antv/f2'
// import F2Canvas from "../F2Canvas/index";
import './index.scss'

interface IPieRoseTypeChartsProps {
  data?: any[]
  fieldNames?: {
    [key: string]: string
  }
  id?: string
}

const countTotal = (arr: any[], keyName: string) => {
  let total = 0
  total = arr.reduce(function (sum, currentValue) {
    return currentValue.hasOwnProperty('allNum')
      ? currentValue.allNum
      : currentValue[keyName]
      ? sum + currentValue[keyName]
      : sum
  }, 0)
  return total
}

const IPieRoseTypeCharts: React.FC<IPieRoseTypeChartsProps> = props => {
  const [current, setCurrent] = useState<any>(null)

  const {
    id = 'ipierosetype_chart',
    data = [],
    fieldNames = { label: 'year', value: 'population' }
  } = props

  const totalNum = countTotal(data || [], fieldNames.value)

  const sourceData =
    data?.map(item => ({
      ...item,
      a: '1',
      value: item[fieldNames.value] / totalNum
    })) || []

  const Text = (res, context) => {
    const { coord, data: allData } = res
    let currentVal, currentText
    if (current === null) {
      currentVal = allData?.[0][fieldNames.value]
      currentText = allData?.[0][fieldNames.label]
    } else {
      currentVal = allData.find(item => item[fieldNames.label] == current)?.[
        fieldNames.value
      ]
      currentText = current
    }

    const { center } = coord
    return (
      <group
        style={{
          left: center.x,
          top: center.y - context.px2hd('30px'),
          width: '100px'
        }}
      >
        <text
          attrs={{
            text: `${
              totalNum != 0 ? ((currentVal / totalNum) * 100).toFixed(2) : 0
            } %`,
            fill: '#000',
            textAlign: 'center'
          }}
        />
        <text
          style={{ marginTop: '10px' }}
          attrs={{
            text: currentText,
            fill: '#000',
            textAlign: 'center'
          }}
        />
      </group>
    )
  }

  // const { id = "ipierosetype_chart", data = [], fieldNames = {} } = props;
  return (
    <View style={{ width: '100%', height: '260px' }} className='chart_body'>
      {sourceData.length > 0 ? (
        <F2Canvas id={id}>
          <Chart
            data={sourceData}
            coord={{
              type: 'polar',
              transposed: true,
              radius: 0.85,
              innerRadius: 0.5
            }}
            scale={{
              population: {
                min: 0
              }
            }}
          >
            <Interval
              x='a'
              y='value'
              adjust='stack'
              color={[
                fieldNames.label,
                [
                  '#3e73fe',
                  '#f7ba1e',
                  '#14c9c9',
                  '#2fc25b',
                  '#8543e0',
                  '#223273'
                ]
              ]}
              selection={{
                triggerOn: 'touchstart',
                selectedStyle: record => {
                  setCurrent(record[fieldNames.label])
                  const { yMax, yMin } = record
                  return {
                    r: yMax + yMax * 0.1,
                    r0: yMin
                  }
                }
              }}
            />
            <Legend
              position='bottom'
              style={{
                flexDirection: 'row',
                justifyContent: 'center'
              }}
              clickable={false}
            />
            <Text />
          </Chart>
        </F2Canvas>
      ) : null}
    </View>
  )
}

export default IPieRoseTypeCharts
